<template>
  <div class="information">
    <!--搜素部分-->
    <el-card>
      <!--搜素部分-->

      <!--搜索部分的数据结构，searchform中存放5个数据项-->
      <el-form :model="form" label-width="80px" :inline="true">
        <el-row>
          <el-col :span="6">
            <el-form-item label="姓名">
              <el-input v-model="form.name" style="width: 160px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="电话">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="开卡门店">
              <el-select
                v-model="form.subbranch_name"
                placeholder="请选择开卡门店"
              >
                <el-option label="望京分店" value="望京分店"></el-option>
                <el-option label="上海总部" value="上海总部"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="会员卡号">
              <el-input v-model="form.cardId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="会员类型">
              <el-select v-model="form.cardType" placeholder="请选择会员类型">
                <el-option label="普通会员" value="普通会员"></el-option>
                <el-option label="白银会员" value="白银会员"></el-option>
                <el-option label="黄金会员" value="黄金会员"></el-option>
                <el-option label="钻石会员" value="钻石会员"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="searchbutton">
          <el-form-item>
            <el-button type="primary" @click="duansearch()">查询</el-button>
            <el-button @click="duanreset()">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>
    <!--列表展示部分-->
    <el-card>
      <el-button type="primary" @click="addclient()">新增客户</el-button>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="序号" fixed="left">
        </el-table-column>
        <el-table-column prop="cardId" label="会员卡号" width="180">
        </el-table-column>
        <el-table-column prop="name" label="会员名称" width="180">
        </el-table-column>
        <el-table-column prop="card_type" label="会员类型" width="180">
        </el-table-column>
        <el-table-column prop="score" label="总积分" width="180">
        </el-table-column>
        <el-table-column prop="money" label="总消费金额" width="180">
        </el-table-column>
        <el-table-column prop="birth" label="生日" width="180">
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="180"> </el-table-column>
        <el-table-column prop="phone" label="联系电话" width="180">
        </el-table-column>
        <el-table-column prop="idNumber" label="身份证号码" width="180">
        </el-table-column>
        <el-table-column prop="subbranch_name" label="开卡门店" width="180">
        </el-table-column>
        <el-table-column prop="date" label="开卡日期" width="180">
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="showedialog(scope.row.id)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!--分页部分-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryinfo.page"
        :page-sizes="[6, 12, 18, 24]"
        :page-size="queryinfo.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!--弹出框部分-->
      <!--编辑的弹出框-->
      <el-dialog
        :title="dialogtitle"
        :visible.sync="dialogFormVisible"
        :modal="true"
      >
        <el-form :model="pushform">
          <el-row :gutter="20">
            <el-col :span="7">
              <el-form-item label="姓名">
                <el-input
                  v-model="pushform.name"
                  style="width: 160px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="卡号">
                <el-input v-model="pushform.cardId"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="会员类型">
                <el-select v-model="pushform.card_type">
                  <el-option label="普通会员" value="普通会员"></el-option>
                  <el-option label="白银会员" value="白银会员"></el-option>
                  <el-option label="黄金会员" value="黄金会员"></el-option>
                  <el-option label="钻石会员" value="钻石会员"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="7">
              <el-form-item label="身份证号">
                <el-input
                  v-model="pushform.idNumber"
                  style="width: 160px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="性别">
                <el-input v-model="pushform.sex"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="开卡时间">
                <el-date-picker
                  v-model="pushform.date"
                  type="datetime"
                  placeholder="选择日期时间"
                  default-time="12:00:00"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="7">
              <el-form-item label="生日">
                <el-date-picker
                  v-model="pushform.birth"
                  type="datetime"
                  placeholder="选择日期时间"
                  default-time="12:00:00"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="电话号码">
                <el-input v-model="pushform.phone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="开卡门店">
                <el-select v-model="pushform.subbranch_name">
                  <el-option label="望京分店" value="望京分店"></el-option>
                  <el-option label="上海总部" value="上海总部"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="7">
              <el-form-item label="总积分">
                <el-input
                  v-model="pushform.score"
                  style="width: 160px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="消费金额">
                <el-input v-model="pushform.money"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updataclient()">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import {
  getclientList,
  searchclient,
  deleteclient,
  idsearch,
  addclientlist,
  updateclient,
  viplist,
} from '../../http/api'
export default {
  data() {
    return {
      //搜索框的提交数据 内部存放后端提供的数据项
      form: {
        name: '',
        cardId: '',
        cardType: '',
        phone: '',
        subbranch_name: '',
        page: 1,
        limit: 6,
      },
      haveform: {},
      //列表渲染的数据
      tableData: [{}],
      //编辑框提交的数据
      // pushform: {
      //   name: '',
      //   birth: '',
      //   cardId: '',
      //   card_type: '',
      //   data: '',
      //   id: '',
      //   idNumber: '',
      //   money: '',
      //   phone: '',
      //   score: '',
      //   sex: '',
      //   subbranch_name: [],
      // },
      pushform: {},
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogtitle: 'wdfwd',
      //分页控制的数据
      queryinfo: {
        //当前页数
        page: 1,
        //每页显示数量
        limit: 6,
      },
      //数据总的数量
      total: 10,
    }
  },
  methods: {
    // //每行中操作按钮绑定的函数
    handleDelete(index) {
      console.log(index)
      deleteclient(index)
        .then((res) => {
          console.log('调用actions成功：', res)
          this.getuserlist()
          return this.$message('删除成功！')
        })
        .catch((err) => {
          console.log('调用actions失败：', err)
          return this.$message.error('列表渲染失败！')
        })
    },
    // //监听分页展示数量的改变
    handleSizeChange(newSize) {
      console.log(newSize)
      this.queryinfo.limit = newSize
      this.getuserlist()
    },
    //监听当前页码
    handleCurrentChange(newPage) {
      console.log(newPage)
      this.queryinfo.page = newPage
      this.getuserlist()
    },
    //获取列表数据
    getuserlist() {
      getclientList(this.queryinfo)
        .then((res) => {
          console.log('调用actions成功：', res)
          this.tableData = res.data.value.data
          this.total = res.data.value.total
        })
        .catch((err) => {
          console.log('调用actions失败：', err)
          return this.$message.error('列表渲染失败！')
        })
    },
    // //点击按钮弹出修改的弹窗
    showedialog(index) {
      this.dialogtitle = '编辑客户信息'
      this.dialogFormVisible = true
      if (this.dialogtitle == '编辑客户信息') {
        idsearch(index)
          .then((res) => {
            console.log('调用actions成功：', res)
            this.pushform = res.data.value.data
          })
          .catch((err) => {
            console.log('调用actions失败：', err)
            return this.$message.error('列表渲染失败！')
          })
      }
    },
    //查询处理函数
    duansearch() {
      console.log(this.form)
      searchclient(this.form)
        .then((res) => {
          console.log('调用actions成功：', res)
          this.tableData = res.data.value.data
          this.total = res.data.value.total
        })
        .catch((err) => {
          console.log('调用actions失败：', err)
          return this.$message.error('列表渲染失败！')
        })
    },
    // //查询框的重置参数
    duanreset() {
      for (let i in this.form) {
        this.form[i] = ''
      }
       this.form.page= 1;
       this.form.limit=6;
    },
    // //新增客户数据接口
    addclient() {
      this.dialogtitle = '新增客户信息'
      this.dialogFormVisible = true
      this.pushform = {}
    },
    // //新增用户界面提交时间
    updataclient() {
      this.dialogFormVisible = false
      //根据当前不同的total，调用不同的接口
      if (this.dialogtitle == '新增客户信息') {
        console.log('选择框区分成功')
        this.Reserve()
        addclientlist(this.pushform)
          .then((res) => {
            console.log('调用actions成功：', res)
            this.getuserlist()

            console.log(this.pushform)

            return this.$message('用户信息添加成功！')
          })
          .catch((err) => {
            console.log('调用actions失败：', err)
            return this.$message.error('用户信息添加失败！')
          })
      } else if (this.dialogtitle == '编辑客户信息') {
        console.log('选择框区分成功')
        updateclient(this.pushform)
          .then((res) => {
            console.log('调用actions成功：', res)
            console.log('向后端发送的编辑数据',this.pushform)
            this.getuserlist()
            return this.$message('修改用户信息成功！')
          })
          .catch((err) => {
            console.log('调用actions失败：', err)
            return this.$message.error('修改用户信息失败！')
          })
      }
    },
    //获取到会员卡的列表
    getviplist() {
      viplist()
        .then((res) => {
          console.log('调用actions成功：', res)
          this.haveform = JSON.stringify(res.data.value.data)
        })
        .catch((err) => {
          console.log('调用actions失败：', err)
          return this.$message.error('会员卡信息获取失败！')
        })
    },
    reserve(data) {
      var date = new Date(data)
      var Y = date.getFullYear() + '-'
      var M =
        (date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1) + '-'
      var D =
        (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      var h =
        (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      var m =
        (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) +
        ':'
      var s =
        date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      return Y + M + D + h + m + s
    },
    Reserve() {
      this.pushform.birth = this.reserve(this.pushform.birth)
      this.pushform.date = this.reserve(this.pushform.date)
    },
  },
  created() {
    this.getuserlist()
    // this.getviplist()
  },
}
</script>
<style>
.grid-content {
  background-color: rosybrown;
}
.el-card {
  margin-top: 20px;
}
.searchbutton {
  margin-left: 80px;
}
</style>